<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MARRIAGE</title>

    <link href="//fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="/static/css/style.css"  type="text/css">
    <link rel="stylesheet" href="/static/css/css_slider.css" type="text/css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css" type="text/css">

    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios-0.18.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">
    <!-- header -->
    <header>
        <div class="top-head container">
            <div class="ml-auto text-right right-p">
                <ul>
                    <li class="mr-3">
                        <span class="fa fa-phone"></span>+1(21) 234 4567</li>
                    <li>
                        <span class="fa fa-envelope-open"></span> <a href="mailto:marriage@example.com">marriage@example.com</a> </li>
                </ul>
            </div>
        </div>
        <div class="container">
            <!-- nav -->
            <nav class="py-3 d-lg-flex">
                <div id="logo">
                    <h1> <a href="#home"><span class="fa fa-gift"></span> MARRIAGE </a></h1>
                </div>
                <label for="drop" class="toggle"><span class="fa fa-bars"></span></label>
                <input type="checkbox" id="drop" />
                <ul class="menu ml-auto mt-1">
                    <li class=""><a th:href="@{/users/toIndex}">首页</a></li>
                    <li class="active"><a href="#toList">结交好友</a></li>
                    <li><a  th:href="@{/chat/toSayHelloPage}">我的消息</a> </li>
                    <li class=""><a th:href="@{/users/toUserInfo}">个人中心</a></li>
                    <li class=""><a th:href="@{/users/toLogin}">退出登录</a></li>
                </ul>
            </nav>
            <!-- //nav -->
        </div>
    </header>
    <!-- //header -->
    <!-- 横幅 -->
    <div class="banner" id="home">
        <div class="layer">
            <div class="banner-text-w3ls">
            </div>
            <div id="toList" class="banner-bottom py-5" >
                <div class=" container">
                    <div class="row bottom-grids ">
                        <div>
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item label="星座">
                                    <el-select v-model="formInline.user" placeholder="星座">
                                        <el-option label="白羊座 3/21-4/20" value="白羊座"></el-option>
                                        <el-option label="金牛座 4/21-5/21" value="金牛座"></el-option>
                                        <el-option label="双子座 5/22-6/21" value="双子座"></el-option>
                                        <el-option label="巨蟹座 6/22-7/22" value="巨蟹座"></el-option>
                                        <el-option label="狮子座 7/23-8/23" value="狮子座"></el-option>
                                        <el-option label="处女座 8/24-9/23" value="处女座"></el-option>
                                        <el-option label="天秤座 9/24-10/23" value="天秤座"></el-option>
                                        <el-option label="天蝎座 10/24-11/22" value="天蝎座"></el-option>
                                        <el-option label="射手座 11/23-12/21" value="射手座"></el-option>
                                        <el-option label="魔羯座 12/22-1/20" value="魔羯座"></el-option>
                                        <el-option label="水瓶座 1/21-2/19" value="水瓶座"></el-option>
                                        <el-option label="双鱼座 2/20-3/20" value="双鱼座"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="性别">
                                    <el-select v-model="formInline.region" placeholder="性别">
                                        <el-option label="男" value="1"></el-option>
                                        <el-option label="女" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">查询</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div  v-for="(user,index) in userInfoList" style="width: 100%;" @click="findUserBy(user.userId)">
                            <el-descriptions border :column="4" style="margin-bottom:10px">
                                <el-descriptions-item label="昵称" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{user.userName}}</el-descriptions-item>
                                <el-descriptions-item label="性别" :contentStyle='contentStyle' :labelStyle='labelStyle'>
                                    <el-tag size="small" v-if="user.userSex=='1'?true:false">男</el-tag>
                                    <el-tag size="small" v-if="user.userSex=='2'?true:false">女</el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item label="年龄" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{user.userAge}}</el-descriptions-item>
                                <el-descriptions-item label="收藏量" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{user.userNumber}}次</el-descriptions-item>
                                <el-descriptions-item label="工作" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{user.userJob}}</el-descriptions-item>
                                <el-descriptions-item label="学历" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{user.userEducation}}</el-descriptions-item>
                                <el-descriptions-item label="婚姻状态" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{user.userMaritalStatus}}</el-descriptions-item>
                                <el-descriptions-item label="手机号" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{user.userPhone}}</el-descriptions-item>
                                <el-descriptions-item label="邮箱号" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{user.userMail}}</el-descriptions-item>
                                <el-descriptions-item label="地址" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{user.userAddress}}</el-descriptions-item>
                            </el-descriptions>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- //banner -->


    <!-- footer -->
    <footer>
        <div class="footer-layer py-sm-5 pt-5 pb-3">
            <div class="container py-md-3">
                <div class="footer-grid_section text-center">
                    <div class="footer-title mb-3">
                        <a href="#"><span class="fa fa-gift"></span> Marriage</a>
                    </div>
                    <div class="footer-text">
                        <p>Blind date communication is zero distance, marriage service is 100%</p>
                        <p>相亲交流零距离，婚恋服务百分百</p>
                    </div>
                </div>
            </div>

        </div>
    </footer>
    <!-- //footer -->

    <!-- copyright -->
    <section class="copyright">
        <div class="container py-4">
            <div class="row bottom">
                <div class="col-lg-6 copy-right p-0">
                    <p class="">© 2022 Match Marriage All rights reserved | Design by
                        <a href="https://blog.csdn.net/qq_45839699?type=sub&subType=watch"> ZJ.</a>
                    </p>
                </div>
            </div>
        </div>
    </section>

    <div class="move-top text-right">
        <a href="#home" class="move-top">
            <span class="fa fa-angle-up  mb-3" aria-hidden="true"></span>
        </a>
    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                userInfoList:[],
                guidanceId:'',
                contentStyle: {
                    'text-align': 'center',
                },
                //label样式
                labelStyle: { 'width': '100px' },
                formInline: {
                    user: '',
                    region: ''
                }

            }
        },
        methods: {
            //跳转到用户详情页面
            findUserBy(userId){
                var f=document.createElement('form');
                f.style.display='none';
                f.action='toFindUserByUserIdForFriend';
                f.method='post';
                f.innerHTML='<input type="hidden" name="userId" value="'+userId+'"/>';
                document.body.appendChild(f);
                f.submit();
            },
            //查询
            onSubmit() {
                var _this = this;
                var params = new URLSearchParams();
                params.append('userSex',this.formInline.region);
                params.append('userConstellation',this.formInline.user);
                axios({
                    method:"post",
                    url:"/friends/findUserByUserSexOrUserConstellation",
                    data:params
                }).then(function(response) {
                    _this.userInfoList = response.data;
                });
            }
        },
        mounted(){
            var _this=this;
            axios({
                method:"get",
                url:"toFindUserList",
            }).then(function (response) {
                _this.userInfoList = response.data;
                /*for (var i = 0; i < response.data.length; i++){
                    _this.guidanceList[i].guidanceTime = timestampToTime(response.data[i].guidanceTime);
                }*/
            });
        }
    });
    function timestampToTime(timestamp) {
        var date = new Date(timestamp );//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
        var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
        return Y+M+D;
    }
</script>